<template>
  <KView class="goods-bargain-view">
    <KView class="goods-bargain-view-text-div">
      <KView class="goods-bargain-view-text" clearfix>
        <KView>已砍</KView>
        <KView class="goods-bargain-view-num">
          <span>{{bargain.discountedPrice}}</span><span>元</span>
        </KView>

        <template v-if="bargain.discountedRate!==0">
          <KView>&nbsp;,&nbsp;仅差</KView>
          <KView class="goods-bargain-view-num">{{bargain.discountedRate}}%</KView>
        </template>
        <template v-else>
          <KView>&nbsp;,&nbsp;砍价成功</KView>
        </template>
      </KView>
    </KView>

    <bargain-progress :bargain="bargain"></bargain-progress>

    <KView v-if="bargain.unionid===null" class="goods-bargain-view-btn">
      <template v-if="bargain.type===2||bargain.discountedRate===0">
        <KView v-if="bargain.isPay" class="goods-bargain-view-bargain is-pay">恭喜您购入本商品</KView>
        <KView v-else class="goods-bargain-view-bargain" @click="toPayMomeny">立即支付</KView>
      </template>
      <template v-else-if="bargain.isBargaining">
        <KButton v-if="isMiniprogram" class="goods-bargain-view-share" open-type="share">邀请好友帮砍价</KButton>
        <KButton v-else class="goods-bargain-view-share" @click="inviteBargain">邀请好友帮砍价</KButton>
      </template>
      <KView v-else class="goods-bargain-view-bargain" @click="toBargain">狂砍一刀</KView>
    </KView>
    <KView v-else-if="bargain.type===1" class="goods-bargain-view-btn">
      <KView v-if="!bargain.isBargaining&&bargain.discountedRate!==0" class="goods-bargain-view-bargain" @click="toBargain">帮好友狂砍一刀</KView>
      <KView v-else class="goods-bargain-view-bargain" @click="joinBargain">我也要参加</KView>
    </KView>
  </KView>
</template>

<script>
  import BargainProgress from './bargainProgress';

  export default {
    props: {
      bargain: {
        type: Object,
        required: true
      }
    },

    data() {
      return {
        isMiniprogram: process.env.isMiniprogram
      };
    },

    methods: {
      toBargain() {
        this.$emit('to-bargain');
      },

      toPayMomeny() {
        this.$emit('pay-momeny');
      },

      inviteBargain() {

      },

      joinBargain(){
        this.$emit('join-bargain');
      }
    },

    components: {
      BargainProgress
    }
  };

</script>

<style lang="scss">
  .goods-bargain-view {
    height: 100%;

    .goods-bargain-view-text-div {
      text-align: center;
      height: formatPx(40);

      .goods-bargain-view-text {
        font-size: formatPx(26);
        height: formatPx(40);
        line-height: formatPx(44);
        display: inline-block;

        >div {
          float: left;
        }

        .goods-bargain-view-num {
          font-size: formatPx(36);
          line-height: formatPx(40);
          color: #fd5a3a;
          font-weight: bold;
          margin: 0 formatPx(10);
        }
      }
    }

    .bargain-progress {
      margin-top: formatPx(26);
    }

    .goods-bargain-view-btn {
      margin-top: formatPx(20);
      height: formatPx(90);

      .goods-bargain-view-bargain {
        height: 100%;
        line-height: formatPx(90);
        color: #ffffff;
        font-size: formatPx(28);
        text-align: center;
        background: #ff6f2f;
        border-radius: formatPx(45);
        &.is-pay{
          background: #e0e0e0;
        }
      }

      .goods-bargain-view-share {
        width: 100%;
        height: 100%;
        border: none;
        line-height: formatPx(90);
        color: #ffffff;
        font-size: formatPx(28);
        background: #ff6f2f;
        border-radius: formatPx(45);
        padding: 0;
        font-weight: normal;

        &:active {
          background: #ff6f2f;
          color: #ffffff;
        }
      }
    }
  }

</style>
